<template>
  <div class="card">
    <div>
      <a-input v-model="formData.user_realname" class="inputStyle" placeholder="用户手机号"></a-input>
      <a-input v-model="formData.user_phone" class="inputStyle" placeholder="用户姓名"></a-input>
      <a-range-picker v-model="dateValue" style="width: 410px" @change="dateChange" />
    </div>
    <div style="margin: 10px 0">
      <a-select v-model="formData.search.channel_id" :allowClear="true" placeholder="通道名称" class="inputStyle">
        <a-select-option v-for="item in planType" :key="item.id" :value="item.id">
          {{ item.name }}
        </a-select-option>
      </a-select>
      <a-select v-model="formData.search.bank_id" :allowClear="true" placeholder="银行名称" class="inputStyle">
        <a-select-option v-for="item in bankType" :key="item.id" :value="item.id">
          {{ item.name }}
        </a-select-option>
      </a-select>
      <a-select v-model="formData.search.status" :allowClear="true" placeholder="计划状态" class="inputStyle">
        <a-select-option v-for="item in planStatus" :key="item.id" :value="item.id">
          {{ item.name }}
        </a-select-option>
      </a-select>
      <a-select v-model="formData.search.all_brand" :allowClear="true" placeholder="全部状态" class="inputStyle">
        <a-select-option v-for="item in [{ id: 1, name: '全部品牌' }]" :key="item.id" :value="item.id">
          {{ item.name }}
        </a-select-option>
      </a-select>
      <a-button class="btnStyle" type="primary" @click="getInfoList">查询</a-button>
      <a-button class="btnStyle" @click="reset">重置</a-button>
      <a-button class="btnStyle" @click="batchHandler()" type="primary">处理</a-button>
    </div>
    <a-table
      :rowKey="(record, index) => index"
      expandRowByClick
      :pagination="{
        pageSize: formData.page_size,
        pageSizeOptions: ['20', '30', '40', '50'],
        size: 'small',
        showSizeChanger: true,
        showQuickJumper: true,
        total: total,
        current: formData.page,
        showTotal: total => `共 ${total} 条`
      }"
      @change="paginChange"
      style="border: 1px solid #e8e8e8"
      show-size-changer
      show-quick-jumper
      :row-selection="rowSelection"
      :loading="loading"
      :data-source="tableData"
      :columns="columns"
    >
      <div slot="date" slot-scope="text, record">
        <span>{{ record.plan_start_date }}</span>
        <span>至</span>
        <span>{{ record.plan_end_date }}</span>
      </div>
      <div slot="expandedRowRender" slot-scope="record" style="margin: 0">
        <a-table :pagination="false" :columns="cidColumns" :data-source="record.details"> </a-table>
      </div>
      <div slot="status" slot-scope="text, record">
        <a-icon type="search" class="iconStyle" />
        <span @click="viewDetail(record.id)" :style="`color:${record.status_color};`" class="linkStyle">
          {{ record.status_text }}
        </span>
      </div>
      <div slot="operate" slot-scope="text, record">
        <span style="margin-right: 10px" class="linkStyle" @click="cancel(record.id)">取消</span>
        <span class="linkStyle" @click="handler(record.id)">处理</span>
      </div>
    </a-table>
  </div>
</template>

<script>
import { format } from 'date-fns'
import { getPlanAPI, getPlanStatus, getTradeInfoListAPI, cancelAPI, handlerSignAPI } from '@/api/transaction.js'
import { getBankListAPI } from '@/api/userinfo.js'
export default {
  name: 'smallPlanUnbalanced',
  computed: {
    rowSelection() {
      const { selectedRowKeys } = this
      return {
        selectedRowKeys,
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectedRowKeys = selectedRowKeys
          this.select_rows = selectedRows
        }
      }
    }
  },
  data() {
    return {
      dateValue: [format(new Date().setDate(new Date().getDate() - 2), 'yyyy-MM-dd'), format(new Date(), 'yyyy-MM-dd')],
      selectedRowKeys: [],
      select_rows: [],
      loading: false,
      total: 0,
      cidColumns: [
        {
          title: '异常日期',
          dataIndex: 'date',
          align: 'center'
        },
        {
          title: '消费金额',
          dataIndex: 'pay_amount',
          align: 'center'
        },
        {
          title: '消费手续费',
          dataIndex: 'pay_fee',
          align: 'center'
        },
        {
          title: '还款手续费',
          dataIndex: 'repay_fee',
          align: 'center'
        },
        {
          title: '应还款金额',
          dataIndex: 'wanted_repay_amount',
          align: 'center'
        },
        {
          title: '实际还款金额',
          dataIndex: 'repay_amount',
          align: 'center'
        }
      ],
      columns: [
        {
          title: '计划编号',
          dataIndex: 'id',
          align: 'center'
        },
        {
          title: '所属品牌',
          dataIndex: 'brand_name',
          align: 'center'
        },
        {
          title: '姓名',
          dataIndex: 'realname',
          align: 'center'
        },
        {
          title: '手机号',
          dataIndex: 'phone',
          align: 'center'
        },
        {
          title: '中介',
          align: 'center',
          scopedSlots: { customRender: 'type' }
        },
        {
          title: '计划金额',
          dataIndex: 'amount',
          align: 'center'
        },
        {
          title: '代还金额',
          dataIndex: 'has_repayment_amount',
          align: 'center'
        },
        {
          title: '银行名称',
          dataIndex: 'bank_name',
          align: 'center'
        },
        {
          title: '计划时间',
          align: 'center',
          scopedSlots: { customRender: 'date' }
        },
        {
          title: '申请时间',
          dataIndex: 'ctime',
          align: 'center'
        },
        {
          title: '通道名称',
          dataIndex: 'channel_name',
          align: 'center'
        },
        {
          title: '状态',
          align: 'center',
          scopedSlots: { customRender: 'status' }
        },
        {
          title: '异常',
          dataIndex: 'notice_timestamp',
          align: 'center'
        },
        {
          title: '操作',
          align: 'center',
          scopedSlots: { customRender: 'operate' }
        }
      ],
      tableData: [],
      formData: {
        brand_id: process.env.VUE_APP_BRAND_ID,
        page: 1,
        page_size: 50,
        search: {
          bank_id: undefined,
          channel_id: undefined,
          all_brand: 1,
          status: undefined, //  计划状态
          bank_name: '',
          ctime: [format(new Date().setDate(new Date().getDate() - 2), 'yyyy-MM-dd'), format(new Date(), 'yyyy-MM-dd')],
          end_date: format(new Date(), 'yyyy-MM-dd'),
          start_date: format(new Date().setDate(new Date().getDate() - 2), 'yyyy-MM-dd'),
          user_phone: '',
          user_realname: ''
        }
      },
      planType: [],
      planStatus: [],
      bankType: []
    }
  },
  created() {
    this.getType()
    this.getInfoList()
  },
  methods: {
    reset() {
      this.dateValue = [
        format(new Date().setDate(new Date().getDate() - 2), 'yyyy-MM-dd'),
        format(new Date(), 'yyyy-MM-dd')
      ]
      this.formData = {
        brand_id: process.env.VUE_APP_BRAND_ID,
        page: 1,
        page_size: 50,
        search: {
          bank_id: undefined,
          channel_id: undefined,
          all_brand: 1,
          status: undefined, //  计划状态
          bank_name: '',
          ctime: [format(new Date().setDate(new Date().getDate() - 2), 'yyyy-MM-dd'), format(new Date(), 'yyyy-MM-dd')],
          end_date: format(new Date(), 'yyyy-MM-dd'),
          start_date: format(new Date().setDate(new Date().getDate() - 2), 'yyyy-MM-dd'),
          user_phone: '',
          user_realname: ''
        }
      }
    },
    dateChange(value, date) {
      this.formData.ctime = date
      this.start_date = date[0]
      this.end_date = date[1]
    },
    async getType() {
      try {
        const result = await getPlanAPI({ brand_id: process.env.VUE_APP_BRAND_ID, search: { type: 1 } })
        this.planType = result.data
        const res = await getPlanStatus()
        this.planStatus = res.data.status
        const data = await getBankListAPI({
          brand_id: process.env.VUE_APP_BRAND_ID,
          search: { channel_id: 88, from: 'repayment' }
        })
        this.bankType = data.data
      } catch (error) {
        this.$message.error('系统异常')
      }
    },
    async getInfoList() {
      try {
        this.loading = true
        const result = await getTradeInfoListAPI(this.formData)
        this.tableData = result.data.list
        this.total = result.data.total
      } finally {
        this.loading = false
      }
    },
    paginChange(value) {
      console.log(value)
      this.formData.page = value.current
      this.formData.page_size = value.pageSize
      this.getInfoList()
    },
    async cancel(id) {
      this.$confirm({
        title: '确认取消吗??',
        onOk: async () => {
          await cancelAPI({ brand_id: process.env.VUE_APP_BRAND_ID, plan_id: id })
          this.$message.success('操作成功')
          this.getInfoList()
        },
        onCancel() {
          return
        },
        class: 'test'
      })
    },
    viewDetail(id) {
      this.$router.push({ path: 'plandetails', query: { id } })
    },
    handler(id) {
      this.$confirm({
        title: '此操作将会把异常计划改为正常, 是否继续?',
        onOk: async () => {
          await handlerSignAPI({ ids: id })
          this.$message.success('操作成功')
          this.getInfoList()
        },
        onCancel() {
          return
        },
        class: 'test'
      })
    },
    batchHandler() {
      if (this.select_rows.length < 1) return this.$message.error('至少选择一条数据!')
      this.$confirm({
        title: '此操作将会把异常计划改为正常, 是否继续?',
        onOk: async () => {
          await handlerSignAPI({ ids: this.select_rows.map(item => item.id) })
          this.$message.success('操作成功')
          this.getInfoList()
        },
        onCancel() {
          return
        },
        class: 'test'
      })
    }
  }
}
</script>

<style lang="less" scoped>
.inputStyle {
  margin-right: 10px;
  width: 200px;
}
.btnStyle {
  margin-right: 10px;
}
/deep/ .ant-table-expand-icon-th {
  display: none;
}
/deep/.ant-table-row-expand-icon-cell {
  display: none;
}
/deep/ .ant-table-body {
  white-space: nowrap;
  width: 100%;
  overflow-x: auto;
  font-size: 14px;
}
/deep/ .ant-table-body::-webkit-scrollbar {
  width: 5px;
  height: 6px;
}

/deep/ .ant-table-body::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: #1890ff;
}

/deep/ .ant-table-body::-webkit-scrollbar-track {
  border-radius: 1px;
  background: #f1f1f1;
}
.iconStyle {
  padding: 8px;
  border: 1px solid #dadbdb;
  border-radius: 50%;
  font-size: 15px;
  cursor: pointer;
}
</style>
